JS30 Day 5 筆記

目標

用flex及 transition 製作點擊後圖片展開，同時圖片上下方移入文字的動畫效果

step 1 : panels 元素的 flex 設定

一開始圖片為上至下排序，所以先將圖片改成左至右排序，且等寬排列

.panels {
  ...
  /* 在父元素設定 flex，讓圖片左至右排序 */
  display: flex;
}

.panel {
  ...
/*   子元素的 flex 設爲 1，讓子元素等寬填滿 */
  flex: 1;
}

step 2 : panel 元素的 flex 設定

.panel {
  ...
  flex: 1;
  /* 設定 display： flex，控制 penel 元素下層的 p 元素排列， */
  display:flex;
  /* 子元素主軸置中 */
  justify-content:center;
  /* 子元素垂直軸置中 */
  align-items:center;
  /* 子元素顯示方向從上至下 */
  flex-direction:column;
}

step 3 : 處理 panel 中的文字的上下移動

/* 初始時，panel 下層第一個 p 元素經由 transform 的方法向上移動 */
.panel > *:first-child {transform:translateY(-100%);}
/* 若添加 class name: open-active，panel 下層第一個 p 元素移回原定位*/
.panel.open-active > *:first-child {transform:translateY(0);}
/* 初始時，panel 下層最後一個 p 元素經由 transform 的方法向下移動 */
.panel > *:last-child {transform:translateY(100%);}
/* 若添加 class name: open-active，panel 下層最後一個 p 元素移回原定位*/
.panel.open-active > *:last-child {transform:translateY(0);}

step 4 : 處理點擊 panel 元素後顯示圖片的區塊增大五倍

.panel.open {
  ...
  flex:5;
}

step 5 : 監聽所有的 panel

const panels = document.querySelectorAll('.panel');

function toggleOpen(){
    // 點擊後，
    // 若原本class name 沒有 open，增添加 open，讓顯示圖片的區塊變大五倍
    // 若原本 class name 已有 open，增清除 open，讓顯示圖片的區塊恢復原大小
  this.classList.toggle('open');
}

 // 透過顯示圖片的區塊變大的動畫監聽 transitionend 事件，觸發 toggleActive function
function toggleActive(e){
  // console.log(e.propertyName);
  // 判斷監聽的 propertyName 是否包含 flex,使其在 flex 之後觸發
  // 包含的話，toggle class name： open-active 來控制在範圍外的文字移動效果
  if (e.propertyName.includes('flex')){
    this.classList.toggle('open-active');
  }
}

// 監聽 click 事件，點擊後觸發 toggleOpen function。
panels.forEach(panel => panel.addEventListener('click', toggleOpen));

// 監聽 transitionend 事件，在 CSS transition 结束後觸發 toggleActive function。
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

參考資料：